<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>图片详情</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/modelImageGallery.css">
		<script src="../jslib/jquery_1_8_3.min.js"></script>
	</head>
	<body>
		<div class="breadcrumbs crumb">
			<a href="http://www.baidu.com" target="_blank">当前位置：</a><span class=""><i class="btn-sprite homeIcon"></i></span>&gt;<a href="http://www.baidu.com" target="_blank">大众</a>&gt;<a href="http://www.baidu.com" target="_blank">途观</a>&gt;<a href="http://www.baidu.com" target="_blank" class="crumb-model">1.4TSI DSG 豪华版(188)</a>&gt;<span>外观</span>
		</div>
		<div class="content">
			<div class="imgGalleryWrapper">
				<div class="title">
					<h2 class="f-yahei">途观<span class="model">1.4TSI DSG 豪华版(188)</span></h2>
					
					<div class="selectbox-wrapper">
						<span class="pr selectbox">
							<span class="select-other f-12 pr">切换车型<i class="pa"></i></span>
						</span>
						<div class="carmodel-list hidden" id="selectbox">
							<div class="carmodel-list-wrapper scroll-wrapper">
								<div class="carmodel-list-content scroll-content">
									<ul class="f-12">
										<li class="" idvalue="a">途观  1.4 豪华版 2012</li>
										<li class="" idvalue="b">途观 1.4 豪华版 2012 朗行 1.4 豪华版 2012</li>
										<li class="" idvalue="c">途观 1.4 豪华版</li>
										<li class="" idvalue="d">途观 1.4</li>
										<li class="" idvalue="e">途观 1.5 强力版本</li>
										<li class="" idvalue="f">途观 1.6 送车模版！</li>
										<li class="" idvalue="g">途观 1.7 奢靡版本</li>
										<li class="" idvalue="h">途观 1.8</li>
										<li class="" idvalue="i">途观 1.9</li>
									</ul>
								</div>
							</div>
							<div class="scrollbar">
								<div class="scrollbar-narrow scrollbar-narrow-up"></div>
								<div class="scrollbar-bg">
									<div class="scrollbar-handler"><div class="scrollbar-handler-top"></div><div class="scrollbar-handler-bottom"></div></div>
								</div>
								<div class="scrollbar-narrow scrollbar-narrow-down"></div>
							</div>
						</div>
					</div>

					<!-- <div class="clearfix"></div> -->
				</div>
				<div class="bigImgWrapper">
					<div class="bigImg">
						<!-- <img alt="" data-src="../images/modelImageGallery/img00.jpg" class="hidden">
						<img alt="" data-src="../images/modelImageGallery/img01.jpg" class="hidden"> -->
						<div class="bigImg-leftButton btn-sprite hidden"></div> <!-- 左边按钮 -->
						<div class="bigImg-rightButton btn-sprite hidden"></div> <!-- 右边按钮 -->
					</div>
					<ul class="category">
							<li class="cat exterior cat-active">
								<span class="dscrp f-16 f-yahei">外观</span><br>
								<span class="number f-12">39</span>张
								<img class="smallTri" src="../images/modelImageGallery/triangle.png">
							</li>

							<li class="all all-active">全部</li>
							<li class="clr-picker">
								<!-- 不定高度 -->
								<ul>
									<img alt="" src="../images/modelImageGallery/clrblk_00.jpg" idvalue=''>
									<img alt="" src="../images/modelImageGallery/clrblk_01.jpg" idvalue=''>
									<img alt="" src="../images/modelImageGallery/clrblk_02.jpg" idvalue=''>
									<img alt="" src="../images/modelImageGallery/clrblk_03.jpg" idvalue=''>
									<img alt="" src="../images/modelImageGallery/clrblk_04.jpg" idvalue=''>
									<img alt="" src="../images/modelImageGallery/clrblk_05.jpg" idvalue=''>
								</ul>
							</li>
							<li class="cat interior">
								<span class="dscrp f-16 f-yahei">内饰</span><br>
								<span class="number f-12">39</span>张
								<img class="smallTri hidden" src="../images/modelImageGallery/triangle.png">
							</li>
							<li class="cat activity">
								<span class="dscrp f-16 f-yahei">活动</span><br>
								<span class="number f-12">39</span>张
								<img class="smallTri hidden" src="../images/modelImageGallery/triangle.png">
							</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="thumbnail-wrapper"> <!-- 小图浏览区域 --> 
					<!-- 左箭头 -->
					<div class="thumbnail-leftButton-wrapper"><span class="thumbnail-leftButton btn-sprite"></span></div>
					<!-- 小图列表区窗口 -->
					<div class="thumbnail-list-window">
						<div class="thumbnail-list">
							<!-- <li>
								<img src="../images/modelImageGallery/smallImg00.jpg">
								<img src="../images/modelImageGallery/smallImg01.jpg">
								<img src="../images/modelImageGallery/smallImg02.jpg">
								<img src="../images/modelImageGallery/smallImg03.jpg">
								<img src="../images/modelImageGallery/smallImg04.jpg">
								<img src="../images/modelImageGallery/smallImg05.jpg">
								<img src="../images/modelImageGallery/smallImg06.jpg">
							</li>
							<li>
								<img src="../images/modelImageGallery/smallImg07.jpg">
								<img src="../images/modelImageGallery/smallImg08.jpg">
								<img src="../images/modelImageGallery/smallImg09.jpg">
								<img src="../images/modelImageGallery/smallImg10.jpg">
							</li> -->
							<div class="clearfix"></div>
						</div>
					</div>
					<!-- 右箭头 -->
					<div class="thumbnail-rightButton-wrapper"><span class="thumbnail-rightButton btn-sprite"></span></div>	
				</div> 
				<!-- 底部信息区 -->
				<div class="carInfo-wrapper">
					<img src="../images/modelImageGallery/carSmallImg00.jpg" class="carImg">
					<dl class="bscInfo">
						<dt class="carName f-yahei f-b"><a href="http://www.baidu.com" target="_blank">途观</a></dt>
						<dd>
							<dl>
								<dt>经销商报价</dt>
								<dd>11.80万-13.90万</dd>
							</dl>
						</dd>
						<dd>
							<dl>
								<dt>厂商指导价</dt>
								<dd>11.60万-13.80万</dd>
							</dl>
						</dd>
					</dl>
					<ul>
						<li class="btn1"><a href="http://www.baidu.com" target="_blank">配置参数</a></li>
						<li class="btn0"><a href="http://www.baidu.com" target="_blank">活动</a></li>
						<li class="btn0"><a href="http://www.baidu.com" target="_blank">资讯</a></li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>


		<script src="../jslib/jquery.mousewheel.js"></script>
		<script src="../js/component/ECar.imitatescroll.js"></script>
		<script src="../js/ECar.newImageGallery.js"></script>
		<script>
			var imageGalleryOptions = {
				imageGallery: ".imgGalleryWrapper",
				thumbnailLeftButton: ".thumbnail-leftButton-wrapper",
				thumbnailRightButton: ".thumbnail-rightButton-wrapper",
				bigImgLeftButton: ".bigImg-leftButton",
				bigImgRightButton: ".bigImg-rightButton",
				thumbnailList: ".thumbnail-list", // ul
				thumbnailListWindow: ".thumbnail-list-window",
				selectBox: ".selectbox",
				selectBoxId: "#selectbox",
				selectBoxWrapper: ".selectbox-wrapper",
				bigImg: ".bigImg",
				numImgsPerList: 7,
				category: ".category",
				crumbModel: ".crumb-model",
				titleModel: ".title .model",
				title: ".title h2"
			};
			ECar.imageGallery(imageGalleryOptions);
		</script>

	</body>
</html>